// CustomSearchBar.js
import React, { useState } from 'react';
import { Input, Radio, Cascader } from 'antd';

const { Search } = Input;

const CustomSearchBar = ({ onNormalSearch, options }) => {
  const [searchMode, setSearchMode] = useState('normal');

  const handleSearchModeChange = (e) => {
    setSearchMode(e.target.value);
  };

  const handleNormalSearch = (value) => {
    if (onNormalSearch) {
      onNormalSearch(value);
    }
  };

  return (
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <Radio.Group
        size="small"
        buttonStyle="solid"
        value={searchMode}
        onChange={handleSearchModeChange}
      >
        <Radio.Button value="normal">普通搜索</Radio.Button>
        <Radio.Button value="cascader">级联搜索</Radio.Button>
      </Radio.Group>

      {searchMode === 'normal' ? (
        <Search
          placeholder="输入搜索关键词"
          onSearch={handleNormalSearch}
          enterButton
        />
      ) : (
        <Cascader
          options={options}
          placeholder="请选择或搜索"
          onChange={(value, selectedOptions) => {
            console.log('Selected:', value, selectedOptions);
            // 这里可以根据需要处理级联搜索的结果
          }}
          multiple
          maxTagCount="responsive"
        />
      )}
    </div>
  );
};

export default CustomSearchBar;
